<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <title>H+ 后台主题UI框架 - 基础表格</title>
  <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
  <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

  <link rel="shortcut icon" href="/favicon.ico">
  <link href="/css/bootstrap.min.css?v=3.3.7" rel="stylesheet">
  <link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
  <link href="/css/plugins/iCheck/custom.css" rel="stylesheet">
  <link href="/css/animate.css" rel="stylesheet">
  <link href="/css/style.css?v=4.1.0" rel="stylesheet">
  <!-- Sweet Alert -->
  <link href="/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
  <!-- Data Tables -->
  <link href="/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
  <style type="text/css">
  </style>


</head>

<body class="gray-bg">
  <div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
      <div class="col-sm-12">
        <div class="ibox float-e-margins">
          <div class="ibox-title">
            <h5>Flowable流程管理</h5>
            <div class="ibox-tools">
              <a class="collapse-link">
                <i class="fa fa-chevron-up"></i>
              </a>
              <a class="dropdown-toggle" data-toggle="dropdown" href="/table_basic.html#">
                <i class="fa fa-wrench"></i>
              </a>
              <ul class="dropdown-menu dropdown-user">
                <li><a href="/table_basic.html#">选项1</a>
                </li>
                <li><a href="/table_basic.html#">选项2</a>
                </li>
              </ul>
              <a class="close-link">
                <i class="fa fa-times"></i>
              </a>
            </div>
          </div>
          <div class="ibox-content">
            <div class="row">
              <div class="col-sm-9 m-b-xs">
                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#modal-form"
                        data-whatever="@mdo">部署
                </button>
                <!--<a class="btn btn-primary single disabled">
                    <i class="fa fa-edit"></i> 修改
                </a>
                <a class="btn btn-danger multiple disabled">
                    <i class="fa fa-remove"></i> 删除
                </a>
                <a class="btn btn-warning">
                    <i class="fa fa-download"></i> 导出
                </a>-->
              </div>

              <div class="col-sm-3">
                <form action="/flow/definition/list" method="get" id="pageForm">
                  <div class="input-group">
                    <input type="text" name="key" id="formKey" th:value="${pageUtils.key}" placeholder="请输入关键词"
                           class="input-sm form-control">
                    <input type="hidden" name="pageSize" id="pageLimit" th:value="${pageUtils.pageSize}">
                    <input type="hidden" name="currPage" id="pageCurPage" th:value="${pageUtils.currPage}">
                    <span class="input-group-btn">
                                        <button type="button" onclick="search()"
                                                class="btn btn-sm btn-primary"> 搜索</button>
                                    </span>
                  </div>
                </form>

              </div>
            </div>
            <div class="table-responsive">
              <table class="table table-striped">
                <thead>
                <tr>
                  <th></th>
                  <th>流程定义ID</th>
                  <th>流程定义KEY</th>
                  <th>名称</th>
                  <th>发布ID</th>
                  <th>版本</th>
                  <th>状态</th>
                  <th>XML</th>
                  <th>流程图</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="flow:${pageUtils.list}">
                  <td>
                    <input type="checkbox" class="i-checks" name="input[]">
                  </td>
                  <td>[[${flow.id}]]</td>
                  <td>[[${flow.flowKey}]]</td>
                  <td>[[${flow.name}]]</td>
                  <td>[[${flow.deployId}]]</td>
                  <td>[[${flow.version}]]</td>
                  <td>[[${flow.suspensionState==1?"激活":"挂起"}]]</td>
                  <td>
                    <a href="javascript:void(0)" th:onclick="showXML([[${flow.id}]])"
                       data-toggle="modal" data-target="#modal-flow-xml">
                      查看xml
                    </a>
                  </td>
                  <td><a href="javascript:void(0)" th:onclick="showImg([[${flow.id}]],[[${flow.name}]])"
                         data-toggle="modal" data-target="#modal-flow-img">查看流程图</a></td>
                  <td>
                    <a th:href="'/flow/definition/updateState?definitionId='+${flow.id}"
                       class="btn btn-primary btn-sm ">
                      <i class="fa fa-edit"></i> [[${flow.suspensionState==1?'挂起':'激活'}]]
                    </a>

                    <a href="javascript:void(0)"
                       th:onclick="deleteFlow([[${flow.deployId}]])"
                       class="btn btn-danger btn-sm ">
                      <i class="fa fa-remove"></i> 删除
                    </a>
                  </td>
                </tr>

                </tbody>
              </table>
            </div>

            <div th:include="common/basePage"></div>

          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- 部署流程的创建 -->
  <div id="modal-form" class="modal fade" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="exampleModalLabel">流程部署</h4>
        </div>
        <form action="/flow/definition/deployFlow" method="post" enctype="multipart/form-data">
          <div class="modal-body">

            <div class="form-group">
              <label for="flow-name" class="control-label">流程名称:</label>
              <input type="text" name="name" class="form-control" id="flow-name">
            </div>
            <div class="form-group">
              <label for="flow-categroy" class="control-label">流程类别:</label>
              <input type="text" name="categroy" class="form-control" id="flow-categroy">
            </div>
            <div class="form-group">
              <label for="flow-file" class="control-label">流程类别:</label>
                <input class="form-control" type="file" name="file" id="flow-file"/>
            </div>

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="submit" class="btn btn-primary">部署</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- 展示流程图的 窗口 -->
  <div id="modal-flow-img" class="modal fade" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document" style="width: auto">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="flowImgModalLabel">查看流程图：<span id="flowName"></span></h4>
        </div>

        <div class="modal-body">
          <img src="#" id="flowImg">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭窗口</button>
          <!--<button type="submit" class="btn btn-primary">部署</button>-->
        </div>

      </div>
    </div>
  </div>

  <!-- 展示流程图的XML内容的 窗口 -->
  <div id="modal-flow-xml" class="modal fade" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document" style="width: auto">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="flowXMLModalLabel">查看流程图XML：<span id="flowXMLHeader"></span></h4>
        </div>

        <div class="modal-body">
          <xmp id="flowXML"></xmp>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭窗口</button>
          <!--<button type="submit" class="btn btn-primary">部署</button>-->
        </div>

      </div>
    </div>
  </div>
  <!-- 全局js -->
  <script src="/js/jquery.min.js?v=2.1.4"></script>
  <script src="/js/bootstrap.min.js?v=3.3.7"></script>


  <!-- Peity -->
  <script src="/js/plugins/peity/jquery.peity.min.js"></script>

  <!-- 自定义js -->
  <script src="/js/content.js?v=1.0.0"></script>


  <!-- iCheck -->
  <script src="/js/plugins/iCheck/icheck.min.js"></script>

  <!-- Peity -->
  <script src="/js/demo/peity-demo.js"></script>

  <script>
      $(document).ready(function () {
          $('.i-checks').iCheck({
              checkboxClass: 'icheckbox_square-green',
              radioClass: 'iradio_square-green',
          });
      });

      function deleteFlow(deployId) {
          swal({
              title: "您确定要删除这条信息吗" + deployId,
              text: "删除后将无法恢复，请谨慎操作！",
              type: "warning",
              showCancelButton: true,
              confirmButtonColor: "#DD6B55",
              confirmButtonText: "删除",
              closeOnConfirm: false
          }, function () {
              // 做删除的操作
              $.get("/flow/definition/deleteFlow/" + deployId, function (data) {
                  location.href = "/flow/definition/list"
              })

          });
      }


      // 展示流程图 图片
      function showImg(procDefId, name) {
          $("#flowName").html(name);
          $("#flowImg").attr("src", "/flow/definition/flowImg?procDefId=" + procDefId);
      }

      // 展示流程图xml
      function showXML(procDefId) {
          $.get("/flow/definition/flowXML?procDefId=" + procDefId, function (data) {
              $("#flowXML").text(data);
          })
      }
  </script>
  <script src="/js/plugins/sweetalert/sweetalert.min.js"></script>
  <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
  <!--统计代码，可删除-->

</body>

</html>
